<template>
  <view>
    <uni-popup ref="popup" background-color="#fff">
      <view class="box">
        <view class="cancel" @click="close()">
          <uni-icons type="clear" size="30"></uni-icons>
        </view>
        <rich-text :nodes="centent"></rich-text>
        <view v-if="payment_code =='transfer'" class="upload">
          <view class="chonge" v-if="Imgdata.filePath">
            <view class="cancelImg" @click="cancelImg()">
              <uni-icons type="clear" size="25"></uni-icons>
            </view>
            <!-- careRepair.picture[index] -->
            <image :src="Imgdata.filePath"></image>
          </view>
          <view
            class="chonge chongeser"
            @click="uploadImg()"
            v-if="!Imgdata.filePath"
          >
            <image
              class="chonup"
              src="../../static/images/chonge.png"
              mode=""
            ></image>
          </view>
          <!-- 	<view class="tis">
						*最多可上传1张
					</view> -->
        </view>
        <view v-if="payment_code =='transfer'" class="Tips">请上传支付截图</view>
        <view>
          <view>备注：</view>
          <view>
            <textarea class="textarea" v-model="text" />
          </view>
        </view>
        <view class="btn" @click="clKSubmit">提交</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
const requImg = require("@/common/api_sign/requImg.js");
export default {
//   props: ["centent","payment_code"],
  props:{
  	centent:{
  		type:String,
  	},
  	payment_code:{
  		type:String,
  		// default:'transfer',
  	}
  },
  data() {
  	return {
  		list: [],
  		text: '',
  		Imgdata: {
  			"filePath": '',
  			"path": ''
  		}
  	}
  },
  mounted() {
  },
  methods: {

    uploadImg(i) {
      let that = this;
      uni.chooseImage({
        //图片选择上传
        count: 1,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          let data = requImg.request(
            "index.php?act=upload&op=uploadFile&buss_type=" +
              that.$uploadType.uploadtype014
          );
          var uper = uni.uploadFile({
            url: that.$apiurl + "index.php?act=upload&op=uploadFile",
            filePath: tempFilePaths[0],
            name: "file",
            formData: {
              key: data.key,
              buss_type: data.buss_type,
              api_sign: data.api_sign,
              comefrom: data.comefrom,
              api_time: data.api_time,
            },
            success(res1) {
              let ImgInfo = JSON.parse(res1.data);
              if (ImgInfo.error_code == 0) {
                that.Imgdata = {
                  filePath: ImgInfo.datas.file_url,
                  path: ImgInfo.datas.file_name,
                };
              } else {
                console.log(ImgInfo.message);
                uni.showToast({
                  title: ImgInfo.message,
                  icon: "none",
                });
              }
            },
          });
        },
      });
    },
    cancelImg() {
      //删除图片
      this.Imgdata = {};
    },
    clKSubmit() {
		
      //提交
      if (this.payment_code =='transfer'&&!this.Imgdata.path) {
        uni.showToast({
          title: "请上传支付截图",
          icon: "none",
        });
      } else {
        let data = {
          remark: this.text,
          image: this.Imgdata.path,
        };
        this.$emit("offlinePaySubmit", data);
      }
    },
    open() {
      //打开弹窗
      this.$refs.popup.open();
    },
    close() {
      //关闭弹窗
      this.$refs.popup.close();
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  width: 600rpx;
  background-color: #fff;
  padding: 50rpx 30rpx;
  box-sizing: border-box;
  position: relative;

  .cancel {
    position: absolute;
    right: 0;
    top: -20rpx;
  }

  .upload {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30rpx;
    /* padding-top: 60rpx; */
    border-bottom: 1px solid #f5f5f5;
    background-color: #fff;
    position: relative;

    .chonge {
      width: 150rpx;
      height: 150rpx;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 26rpx;
      margin-bottom: 30rpx;
      position: relative;

      .cancelImg {
        position: absolute;
        right: -20rpx;
        top: -40rpx;
        z-index: 9;
      }

      .chonup {
        width: 54rpx;
        height: 54rpx;
      }

      image {
        width: 100%;
        height: 100%;
      }
    }

    .chongeser {
      border: 2rpx solid #65cdfb;
    }
  }

  .textarea {
    padding: 20rpx;
    box-sizing: border-box;
    width: 100%;
    border: 2rpx solid #323232;
  }

  .btn {
    width: 200rpx;
    height: 80rpx;
    background-color: #f95a00;
    margin: 20rpx auto;
    color: #fff;
    text-align: center;
    line-height: 80rpx;
  }
}
</style>
